<template>
  <view class="Contain">
	  
	  <!-- 广告轮播图 -->
	  <view class="uswiper">
	      <u-swiper :list="list.data" height="200" radius="0" @click="PrevImage" :indicator="true" indicatorMode="line" indicatorActiveColor="rgba(255, 95, 100, 1)" circular imgMode="widthFx"></u-swiper>
	  </view>
	  
	  <view class="mt-2 search" :class="isFixed?'fixed':''">
		  <u-search @search="startSearch" placeholder="输入商品名称" v-model="skeyword" bgColor="#FFF" borderColor="#FF0000" :showAction="false" height="38"></u-search>
		  <view class="sbtn" @click="startSearch">搜索</view>
	  </view>
	  
	  <!-- 下拉菜单 -->
	  <u-overlay :show="showMask" @click="maskClick" zIndex="1"></u-overlay>
	  <DropDown :show="dpshow" @CloseDpDownList="CloseDpDownList"></DropDown>
	  
	  <!-- 中间小icons -->
	  <view class="icons flex justify-start flex-wrap items-baseline">
		  <view class="w-[110rpx] iconBox flex flex-col justify-center items-center ml-2 mr-1 mb-2" v-for="item in iconsList" @click="itemClick(item.iconName)">
			  <view><image :src="item.iconImg" style="width:90rpx; height:90rpx;border-radius:100%;"></image></view>
			  <view><text class="text-sm iconName">{{item.iconName}}</text></view>
		  </view>
	  </view> <!-- icons end -->
	  
	  
	  <!-- 轮播广告 -->
	  <!-- <view class="uswiper">
	      <u-swiper :list="list.data" height="200" @click="PrevImage" :indicator="true" indicatorMode="line" indicatorActiveColor="rgba(255, 95, 100, 1)" circular imgMode="widthFx"></u-swiper>
	  </view> -->
	  

	  <view class="tabs">
		   <u-tabs
		      :list="tabsList"
		      lineWidth="20"
		      lineHeight="7"
		      :lineColor="`url(${lineBg}) 100% 100%`"
		      :activeStyle="{
		          color: '#303133',
		          fontWeight: 'bold',
		          transform: 'scale(1.1)'
		      }"
		      :inactiveStyle="{
		          color: '#606266',
		          transform: 'scale(1)'
		      }"
		      itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			  <!-- 自定义右侧插槽 -->
			  <view slot="right" style="padding-left: 4px;" @click="dropListShow">
				  <u-icon name="list" size="26" bold></u-icon>
			  </view>
		      </u-tabs>
	  </view>	
	  
	  <!-- 美食 -->
	  <view class="dataBody meishiBody">
		    <view class="w-full flex flex-col itemData" v-for="(item,index) in ShowDataList.data" @click="GoLook(ShowDataList.data,index)">
				   <view class="w-full flex flex-row py-4 itemBox">
					   <view class="w-[200rpx] flex justify-center items-center">
						   <image :src="item.imgUrl"></image>
					   </view>
					   <view class="w-[520rpx] flex justify-start flex-col ml-2">
						   <view class="w-[100%] flex justify-center">
								<view class="w-[75%] line-clamp-1 font-bold text-xl ">{{item.title}}</view>
								<view class="w-[25%] flex justify-end items-end font-bold text-sm">{{item.lvName}}</view>
						   </view>
						   <view class="flex justify-between star mt-1">
							   <view class="flex justify-start">
								   <u-rate active-color="#FE5805" size="13" :readonly="true" :allowHalf="true" v-model="item.starValue" inactive-color="#b2b2b2" gutter="0"></u-rate>
								   <text class="text-xs font-bold" style="color:#FE5805;">{{item.starValue}}</text>
								</view>
							   <view class="text-xs text-gray-400">{{item.comment}}</view>
							   <view class="text-xs text-gray-400">{{item. average}}</view>
							   <view class="text-xs text-green-500">{{item.worktime}}</view>
						   </view>
						   <view class="flex justify-between mt-1 types">
							   <view class="flex justify-start">
								   <text class="text-xs text-gray-500">{{item.worktype}}</text>
								   <text class="text-xs text-gray-500 ml-2">{{item.workstation}}</text>
							   </view>
							   <view class="text-xs text-gray-500">{{item.distance}}</view>
						   </view>
						   <view class="flex justify-start mt-1 hot">
							   <view class="pl-1 pr-1" style="background:#FFEEDE;"><text class="relative top-[-3rpx] text-xs font-bold text-amber-800">{{item.paihang}}</text></view>
						   </view>
						   <view class="grid grid-cols-3 gap-1 mt-2">
							   <view v-for="(tagName,tindex) in item.tags" :class="item.class[tindex]" >{{tagName}}</view>
						   </view>
						   <view class="flex justify-between mt-1 mb-3">
								<view class="text-gray-400 text-xs">{{item.favorableRate}}</view>
								<view class="text-gray-400 text-xs">{{item.sell}}</view>
						   </view>
						  <!-- <view class="w-full flex justify-between items-center">
							   <view class="w-8/12 flex justify-start items-center">
								  <text class="text-gray-300 text-xs line-through">原价￥200</text>
								  <text class="text-red-500 text-lg font-semibold ml-1"><text class="text-xs">￥</text>99</text>
							   </view>
						   </view> -->
					   </view>
				   </view>		  
				   <!-- 新会员优惠推荐 -->
				   <view class="flex h-[55rpx] overflow-hidden justify-between newMember" v-for="subItem in item.subDataList">
						<view class="w-[280rpx] flex justify-end items-center pr-2"><text v-if="subItem.isNewMember" class="text-xs text-orange-600">新会员价</text></view>
						<view v-if="subItem.showHui" class="w-[30rpx] h-[30rpx] relative top-[15rpx] flex justify-center items-center bg-orange-100" style="border-radius:100%;">
							<text class="text-xs text-orange-600">惠</text>
						</view>
						<view class="w-[120rpx] relative top-[2rpx] flex justify-center items-center ml-1"><text class="text-sm font-bold text-orange-600">{{subItem.discount}}</text></view>
						<view class="w-[100rpx] h-[33rpx] relative top-[12rpx] ml-1 flex justify-center items-center border border-orange-600 rounded-md" style="padding: 0px;">
							<text class="text-xs font-bold text-orange-600">{{subItem.zhekou}}</text>
						</view>
						<view class="w-[80rpx] flex justify-center items-center"><text class="text-xs text-gray-500 line-through" style="font-size:20rpx;">{{subItem.originPrice}}</text></view>
						<view class="w-[280rpx] flex justify-start items-center"><text class="text-sm line-clamp-1 ml-1">{{strlen(subItem.recommended)}}</text></view>
				   </view>
		   </view> <!-- itemData End -->
	  </view> <!-- meishiBody End -->
	  
	  
	  
	  
	
	  
	  
	  
	  <!-- 分页 -->
	  <!-- <view class="dataBody" style="margin-top:20rpx;">
		   <view class="dTitle">新品专享</view>
		   <view class="w-full flex flex-row py-4 itemBox" v-for="item in dataList" @click="GoUrl('../shop_detail/shop_detail')">
			   <view class="w-2/5 flex justify-center items-center">
				   <image :src="item.imgUrl"></image>
			   </view>
			   <view class="w-3/5 flex justify-start flex-col">
				   <view class="w-auto line-clamp-2 h-11">{{item.title}}</view>
				   <view class="grid grid-cols-3 gap-1 mt-2">
					   <view v-for="(tagName,tindex) in item.tags" :class="item.class[tindex]" >{{tagName}}</view>
				   </view>
				   <view class="text-gray-400 text-xs mt-2">87%好评率</view>
				   <view class="w-full flex justify-between items-center">
					   <view class="w-8/12 flex justify-start items-center">
						  <text class="text-gray-300 text-xs line-through">原价￥100</text>
						  <text class="text-red-500 text-lg font-semibold ml-1"><text class="text-xs">￥</text>200</text>
					   </view>
					   <view class="w-4/12 text-gray-400 text-xs">月销 100</view>
				   </view>
			   </view>
		   </view>
	   </view>   dataBody End -->
	   
	   
  </view> <!-- contain End -->
  
</template>

<script setup lang="ts">	
import { ref,reactive } from 'vue'
import { GoUrl,Toast } from '@/utils/utils'
import {  onLoad,onReachBottom,onPageScroll, onShow } from '@dcloudio/uni-app'
import DropDown from './components/dropdown/dropdown.vue'
import { userStore } from '@/stores/userStore'
/* import tools from '@/common/tools' */
const store = userStore()
const lineBg = "";

let curType=ref("美食"); //美食
let curIndex=ref(0);
let skeyword=ref("");
let isFixed=ref(false);
let dpshow=ref(false);
let showMask=ref(false);
let tabsList=reactive([
{
	name: '推荐'
},
{
	name: '烤肉'
}, {
	name: '火锅',
	badge: {
		isDot: true
	}
}, {
	name: '烧烤烧肉',
}, {
	name: '地方菜'
}, {
	name: '异域料理'
}, {
	name: '自助餐'
}, {
	name: '鱼鲜海鲜'
}, {
	name: '小吃快餐'
}, {
	name: '面包蛋糕'
}]);




let iconsList=reactive<Object>([
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/meishi.png",
		"iconName":"美食"
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/ktv.png",
		"iconName":"休闲娱乐"	
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/step.png",
		"iconName":"按摩足疗"	
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/meirong.png",
		"iconName":"美容医美"
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jiayou.png",
		"iconName":"加油"	
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/bl.png",
		"iconName":"便利店"
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jd.png",
		"iconName":"酒店"	
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/bh.png",
		"iconName":"百货"	
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/dy.png",
		"iconName":"电影"	
	},
	{
		"iconImg":"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yy.png",
		"iconName":"看病买药"
	},
]);

let starValue=ref(4.5);

const itemClick=(itemName:string)=>{
	curType.value=itemName;
	uni.showLoading({
		title:"加载中"
	})
	setTimeout(()=>{
		uni.hideLoading();
	},100)
	showData();
}

const showData=()=>{
	console.log("curType.value==>",curType.value);
	if(curType.value==='美食') ShowDataList.data=meishiList;
	if(curType.value==='休闲娱乐') ShowDataList.data=yuleList;
	if(curType.value==='按摩足疗') ShowDataList.data=muzuList;
	if(curType.value==='美容医美') ShowDataList.data=meirongList;
	if(curType.value==='加油') ShowDataList.data=oilList;
	if(curType.value==='便利店') ShowDataList.data=bianliList;
	if(curType.value==='酒店') ShowDataList.data=jiudianList;
	if(curType.value==='百货') ShowDataList.data=baihuoList;
	if(curType.value==='电影') ShowDataList.data=dianyingList;
	if(curType.value==='看病买药') ShowDataList.data=kanbinList;	
}

const goJYSite=(item:any)=>{
	uni.setStorageSync("JYsiteInfo",item);
	GoUrl('../shop_jiayou/shop_jiayou')
}

//广告轮播图
let list=reactive<any>({data:
	[ 
		"https://img2.baidu.com/it/u=3255635358,2985107372&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
		"https://q8.itc.cn/images01/20240216/97f66292918f40f3870ec17a28ae39b1.jpeg",
		"https://i1.hdslb.com/bfs/archive/bf55224b808e9fb39027e7eaa7928e74df971da7.jpg",
	]
});

const strlen=(inputString:string)=>{
	if(inputString.length>10) return inputString.substring(0,10)+"...";
	return inputString;
}


const startSearch=function(){
	console.log("搜索商品:"+skeyword.value);
	if(!/\S/.test(skeyword.value)){
		Toast("请输入商品名称");
		return;
	}
	//Toast("搜索商品:"+skeyword.value);
	uni.$tools.Toast("hello");
}
const dropListShow=function(){
	dpshow.value=!dpshow.value; //显示下拉菜单
	showMask.value=!showMask.value;
}
const maskClick=function(){
	dpshow.value=!dpshow.value; 
	showMask.value=!showMask.value;
}

const CloseDpDownList=function(data:boolean){
	//console.log("关闭下拉菜单",data);
	dpshow.value=false; //true or false
	showMask.value=false;
	uni.$tools.Toast(data.itemName+" "+data.itemUrl);
}


const GoLook=(dataObj:Array<string>,index:number)=>{
	uni.setStorageSync("productListData",dataObj[index]);
	uni.setStorageSync("curType",curType.value);
	if(curType.value==='加油'){
		goJYSite(dataObj[index])
	}else{
		GoUrl("../shop_productList/shop_productList");
	}
	
}

let ShowDataList=reactive<any>({data:[]});

//美食列表
let meishiList=reactive<any>([
	{
		  type:"美食",
		  id:1,
		  title:"肯德基KFC(赤坎区世贸店)",
		  lvName:"金牌商家",
		  starValue:4.8,
		  comment:"1036条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"西式快餐/汉堡",
		  workstation:"世贸大厦",
		  distance:"距离502m",
		  favorableRate:"87%好评率",
		  sell:"月销 1000+款",
		  riderTime:"约25分钟",
		  paihang:"世贸大厦小吃快餐人气榜第1名 >",
		  subDataList:[
			  {
				  isNewMember:true,
				  showHui:true,
				  discount:"￥220",
				  zhekou:"6.5折",
				  originPrice:"￥380",
				  recommended:"【超值推荐套餐】黄金大鸡腿3-5人 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥320",
				  zhekou:"3.7折",
				  originPrice:"￥680",
				  recommended:"招牌江湖虾6-7人份",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcLogo.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcLogo.png"
		  ],
		  tags:["全网最低价","网红店产品","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"美食",
		  id:2,
		  title:"馨越楼(霞山区山海华府店)",
		  lvName:"优质商家",
		  starValue:3.7,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至4:00",
		  worktype:"中式餐饮/酒楼",
		  workstation:"山海华府",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 300+款",
		  riderTime:"约25分钟",
		  paihang:"霞山区小吃快餐人气榜TOP前3 >",
		  subDataList:[
			  {
				  isNewMember:true,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥380",
				  recommended:"蒜蓉排骨饭3-5人 ",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"新鲜大生蚝2人份",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyueLogo.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyueLogo.png"
		  ],
		  tags:["5星级环境","食材新鲜"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center"]
	},
]);



//休闲娱乐列表
let yuleList=reactive<any>([
	{
		 type:"休闲娱乐",
		  id:1,
		  title:"名门休闲养生会馆",
		  lvName:"金牌商家",
		  starValue:3.7,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"休闲娱乐/KTV",
		  workstation:"寸金路",
		  distance:"距离202m",
		  favorableRate:"57%好评率",
		  sell:"月销 30+单",
		  riderTime:"约25分钟",
		  paihang:"赤坎区复购人数第一名",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥168",
				  zhekou:"6.5折",
				  originPrice:"￥280",
				  recommended:"【女神沐足】70分钟足疗 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥320",
				  zhekou:"3.7折",
				  originPrice:"￥680",
				  recommended:"精油SPA皇家KTV沐足",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/mingmen.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/mingmen.png"
		  ],
		  tags:["全网最低价"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center"]
	},
	{
		  type:"休闲娱乐",
		  id:2,
		  title:"金喜湾休闲会所",
		  lvName:"优质商家",
		  starValue:3.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至4:00",
		  worktype:"按摩/足疗",
		  workstation:"海田车站",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"人气排行榜商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥380",
				  recommended:"【泰式全身】技随心选",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【棋牌+送4饮品】金喜湾棋牌坊",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jinxi.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jinxi.png"
		  ],
		  tags:["5星级环境"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);







//按摩沐足列表
let muzuList=reactive<any>([
	{
		  type:"按摩沐足",
		  id:1,
		  title:"传元堂·SPA·足道·采耳(环球店)",
		  lvName:"金牌商家",
		  starValue:5.0,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"按摩/足疗",
		  workstation:"赤坎区",
		  distance:"距离202m",
		  favorableRate:"57%好评率",
		  sell:"月销 30+单",
		  riderTime:"约25分钟",
		  paihang:"消费满意度最高商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥168",
				  zhekou:"6.5折",
				  originPrice:"￥280",
				  recommended:"【女神沐足】70分钟足疗 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥320",
				  zhekou:"3.7折",
				  originPrice:"￥680",
				  recommended:"精油SPA皇家KTV沐足",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA1.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA1.png"
		  ],
		  tags:["全网最低价"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center"]
	},
	{
		  type:"按摩沐足",
		  id:2,
		  title:"尊莹休闲会所",
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"按摩/足疗",
		  workstation:"鑫海名城",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"赤坎区复购人数第一名",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥380",
				  recommended:"【泰式全身】技随心选",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【棋牌+送4饮品】金喜湾棋牌坊",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA2.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA2.pn"
		  ],
		  tags:["5星级环境"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);








//医学美容列表
let meirongList=reactive<any>([
	{
		  type:"医学美容",
		  id:1,
		  title:"湛江玛利亚医疗美容门诊部",
		  lvName:"金牌商家",
		  starValue:5.0,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"医学美容",
		  workstation:"金沙湾观海长廊",
		  distance:"距离202m",
		  favorableRate:"78%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"消费复购榜第一商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥11.9",
				  zhekou:"6.5折",
				  originPrice:"￥128",
				  recommended:"【冰点脱毛】唇部|腋下二选一 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥2999",
				  zhekou:"3.7折",
				  originPrice:"￥4999",
				  recommended:"生物聚财鼻",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei1.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei1.png"
		  ],
		  tags:["全网最低价","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"医学美容",
		  id:2,
		  title:"湛江华美医疗美容医院",	
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"医学美容",
		  workstation:"鑫海名城",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 50+单",
		  riderTime:"约25分钟",
		  paihang:"地区品牌商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥168",
				  recommended:"【基础水光】东国水光针3ML",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【面部除皱】国产除皱20单位",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei2.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei2.pn"
		  ],
		  tags:["5星级环境","平台爆款推荐"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);




//加油列表
let oilList=reactive<any>([
	{
		  type:"加油站",
		  id:1,
		  title:"中石油(湛江人民北加油站)",
		  lvName:"金牌商家",
		  starValue:3.5,
		  comment:"136条",
		  average:"￥200/人",
		  worktime:"营业至 2:00",
		  worktype:"加油站",
		  workstation:"湛江人民大道北",
		  distance:"距离102m",
		  favorableRate:"58%好评率",
		  sell:"月销 330+单",
		  riderTime:"约25分钟",
		  paihang:"好评最多商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥194",
				  zhekou:"9折",
				  originPrice:"￥200",
				  recommended:"194代200加油券(92/95/98号汽油) ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥291",
				  zhekou:"9.5折",
				  originPrice:"￥300",
				  recommended:"291代300加油券(92/95/98号汽油)",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/oil1.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/oil1.png"
		  ],
		  tags:["全网最低价","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"加油站",
		  id:2,
		  title:"海湾石油湛江蛟龙加油站",
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"加油站",
		  workstation:"麻章区中心城区",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 50+单",
		  paihang:"地区品牌商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥296",
				  zhekou:"9.5折",
				  originPrice:"￥300",
				  recommended:"300面额代金券(95#汽油)",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥0.1",
				  zhekou:"0.2折",
				  originPrice:"￥5",
				  recommended:"【叠加优惠】5面额加油券",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/oil2.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/oil2.png"
		  ],
		  tags:["5星级环境","平台爆款推荐"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);






//便利店
let bianliList=reactive<any>([
	{
		  type:"便利店",
		  id:1,
		  title:"森知客百货超市",
		  lvName:"金牌商家",
		  starValue:5.0,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"便利店",
		  workstation:"鼎盛广场",
		  distance:"距离202m",
		  favorableRate:"78%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"消费复购榜第一商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥11.9",
				  zhekou:"6.5折",
				  originPrice:"￥128",
				  recommended:"【康师傅】冰红茶 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥2999",
				  zhekou:"3.7折",
				  originPrice:"￥4999",
				  recommended:"【统一】方便面",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/b1.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/b1.png"
		  ],
		  tags:["全网最低价","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"便利店",
		  id:2,
		  title:"京东便利店",	
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"便利店",
		  workstation:"百姓村",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 50+单",
		  riderTime:"约25分钟",
		  paihang:"地区品牌商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥168",
				  recommended:"【棉衣】冬季棉衣",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【雪糕】五羊牌雪糕",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/b2.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/b2.png"
		  ],
		  tags:["5星级环境","平台爆款推荐"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);



//酒店
let jiudianList=reactive<any>([
	{
		  type:"酒店",
		  id:1,
		  title:"汇景酒店",
		  lvName:"金牌商家",
		  starValue:5.0,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"酒店",
		  workstation:"鼎盛广场",
		  distance:"距离202m",
		  favorableRate:"78%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"五星级商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥11.9",
				  zhekou:"6.5折",
				  originPrice:"￥128",
				  recommended:"【双人房】2房大床 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥2999",
				  zhekou:"3.7折",
				  originPrice:"￥4999",
				  recommended:"【三人房】3人大床",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jd1.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jd1.png"
		  ],
		  tags:["全网最低价","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"酒店",
		  id:2,
		  title:"迪拜酒店",	
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"酒店",
		  workstation:"百姓村",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 50+单",
		  riderTime:"约25分钟",
		  paihang:"地区品牌商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥168",
				  recommended:"【单间】1人大床",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【单间】1人小床",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jd2.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jd2.png"
		  ],
		  tags:["5星级环境","平台爆款推荐"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);





//百货
let baihuoList=reactive<any>([
	{
		  type:"百货",
		  id:1,
		  title:"佳洁士",
		  lvName:"金牌商家",
		  starValue:5.0,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"百货",
		  workstation:"鼎盛广场",
		  distance:"距离202m",
		  favorableRate:"78%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"消费复购榜第一商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥11.9",
				  zhekou:"6.5折",
				  originPrice:"￥128",
				  recommended:"【糖果】曲奇饼 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥2999",
				  zhekou:"3.7折",
				  originPrice:"￥4999",
				  recommended:"【饼干】奥利奥",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jj1.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jj1.png"
		  ],
		  tags:["全网最低价","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"百货",
		  id:2,
		  title:"曼秀雷敦",	
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"百货",
		  workstation:"百姓村",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 50+单",
		  riderTime:"约25分钟",
		  paihang:"地区品牌商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥168",
				  recommended:"【精品床】大床",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【热水器】电量版",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jj2.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jj2.png"
		  ],
		  tags:["5星级环境","平台爆款推荐"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);











//电影
let dianyingList=reactive<any>([
	{
		  type:"电影",
		  id:1,
		  title:"IMAX影院",
		  lvName:"金牌商家",
		  starValue:5.0,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"电影",
		  workstation:"鼎盛广场",
		  distance:"距离202m",
		  favorableRate:"78%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"消费复购榜第一商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥11.9",
				  zhekou:"6.5折",
				  originPrice:"￥128",
				  recommended:"【精武门】 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥2999",
				  zhekou:"3.7折",
				  originPrice:"￥4999",
				  recommended:"【霍元甲】",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/imax.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/imax.png"
		  ],
		  tags:["全网最低价","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"电影",
		  id:2,
		  title:"大地数字影院",	
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"电影",
		  workstation:"百姓村",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 50+单",
		  riderTime:"约25分钟",
		  paihang:"地区品牌商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥168",
				  recommended:"【红海行动】",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【志愿军雄兵出征】",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/dadi.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/dadi.png"
		  ],
		  tags:["5星级环境","平台爆款推荐"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);


//看病买药
let kanbinList=reactive<any>([
	{
		  type:"看病买药",
		  id:1,
		  title:"天马大药房",
		  lvName:"金牌商家",
		  starValue:5.0,
		  comment:"136条",
		  average:"￥15/人",
		  worktime:"营业至 2:00",
		  worktype:"看病买药",
		  workstation:"鼎盛广场",
		  distance:"距离202m",
		  favorableRate:"78%好评率",
		  sell:"月销 300+单",
		  riderTime:"约25分钟",
		  paihang:"消费复购榜第一商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥11.9",
				  zhekou:"6.5折",
				  originPrice:"￥128",
				  recommended:"【当归】 ",
			  },
			  {
				  isNewMember:false,
				  showHui:false,
				  discount:"￥2999",
				  zhekou:"3.7折",
				  originPrice:"￥4999",
				  recommended:"【感冒灵999】",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/tianma.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/tianma.png"
		  ],
		  tags:["全网最低价","平台爆款推荐"],
		  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
		  type:"看病买药",
		  id:2,
		  title:"九济堂",	
		  lvName:"优质商家",
		  starValue:4.5,
		  comment:"996条",
		  average:"￥28/人",
		  worktime:"营业至5:00",
		  worktype:"看病买药",
		  workstation:"百姓村",
		  distance:"距离1630m",
		  favorableRate:"50%好评率",
		  sell:"月销 50+单",
		  riderTime:"约25分钟",
		  paihang:"地区品牌商家",
		  subDataList:[
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥98",
				  zhekou:"6.5折",
				  originPrice:"￥168",
				  recommended:"【小儿口服液】",
			  },
			  {
				  isNewMember:false,
				  showHui:true,
				  discount:"￥66",
				  zhekou:"3.7折",
				  originPrice:"￥280",
				  recommended:"【退烧贴】",
			  }
		  ],
		  imgUrl:"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jjt.png",
		  slideshowUlr:[
		  	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jjt.pn"
		  ],
		  tags:["5星级环境","平台爆款推荐"],
		  class:["border border-cyan-500 text-cyan-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);





//轮播图点击事件
let dataList=reactive<any>([
	{
	  title:"湘巧(xiangqiao)巧克力味曲奇饼干整箱早餐办公室小零食大非常好味道",
	  imgUrl:"https://img13.360buyimg.com/seckillcms/s140x140_jfs/t1/132671/24/35138/109124/64f19631F64d3905b/b8ef642f0377d564.jpg.avif",
	  tags:["全网最低价","人气产品","爆款"],
	  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
	  title:"湘巧(xiangqiao)巧克力味曲奇饼干整箱早餐办公室小零食大非常好味道123123",
	  imgUrl:"https://m.360buyimg.com/seckillcms/s250x250_jfs/t1/111391/2/40557/95558/6528bf87F6f3a678e/1cb8a83cef0f6e72.jpg",
	  tags:["全网最低价","人气产品","爆款"],
	  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
	  title:"湘巧(xiangqiao)巧克力味曲奇饼干整箱早餐办公室小零食大非常好味道123123",	 
	  imgUrl:"https://img11.360buyimg.com/n1/s450x450_jfs/t1/108908/2/45075/61947/64f1ac46Fbdb9b859/b33883805afdc99b.jpg.avif",
	  tags:["全网最低价","人气产品","爆款"],
	  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
	  title:"湘巧(xiangqiao)巧克力味曲奇饼干整箱早餐办公室小零食大非常好味道123123",	 
	  imgUrl:"https://img13.360buyimg.com/n1/s450x450_jfs/t1/111225/9/41048/177118/64e8ccaeF9c9a9629/507cae4332925121.jpg.avif",
	  tags:["全网最低价","人气产品","爆款"],
	  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
	  title:"湘巧(xiangqiao)巧克力味曲奇饼干整箱早餐办公室小零食大非常好味道123123",
	  imgUrl:"https://img14.360buyimg.com/n1/jfs/t1/149587/39/38672/130364/65254c38Fa3274df4/4bf025b7bd81fa33.jpg.avif",
	  tags:["全网最低价","人气产品","爆款"],
	  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
	  title:"湘巧(xiangqiao)巧克力味曲奇饼干整箱早餐办公室小零食大非常好味道123123",
	  imgUrl:"https://img13.360buyimg.com/seckillcms/s140x140_jfs/t1/132671/24/35138/109124/64f19631F64d3905b/b8ef642f0377d564.jpg.avif",
	  tags:["全网最低价","人气产品","爆款"],
	  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
	{
	  title:"湘巧(xiangqiao)巧克力味曲奇饼干整箱早餐办公室小零食大非常好味道123123",
	  imgUrl:"https://m.360buyimg.com/seckillcms/s250x250_jfs/t1/111391/2/40557/95558/6528bf87F6f3a678e/1cb8a83cef0f6e72.jpg",
	  tags:["全网最低价","人气产品","爆款"],
	  class:["border border-red-500 text-red-500 text-xs flex justify-center","border border-pink-500 text-pink-500 text-xs flex justify-center","border border-cyan-500 text-cyan-500 text-xs flex justify-center"]
	},
]);


onLoad(async ()=>{
	
});

onShow(()=>{
	ShowDataList.data=meishiList; //初始化默认数据
	//记录当前查看的页面
	let c=uni.getStorageSync("curType") || null;
	if(c!=null){
		curType.value=c;
		showData();
	}
});


onPageScroll((e:any)=>{
	//console.log(e);
	dpshow.value=false; //隐藏下拉菜单
	showMask.value=false; //隐藏遮罩
	if(e.scrollTop>30){
		isFixed.value=true;
	}else{
		isFixed.value=false;
	}
})


onReachBottom(()=>{
	console.log("到底了");
	Toast("到底了~");
	addMockData();
})

//产生随机数
const randomNum=function(minNum:number, maxNum:number) {
  switch (arguments.length) {
    case 1:
      return parseInt(Math.random() * minNum + 1, 10);
      break;
    case 2:
      return parseInt(Math.random() * ( maxNum - minNum + 1 ) + minNum, 10);
      //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
      break;
    default:
      return 0;
      break;
  }
} 

//添加模拟数据 -- 每次5条
let loopindex=ref(0);
const addMockData=function():void{
	
	uni.$tools.toast("正在加载分页数据..."+loopindex.value);
	if(loopindex.value>=10){
		uni.$tools.toast("已到底，没有更多数据啦!");
		return;
	}
	let index=0;
	for(var i=0;i<5;i++){
		let obj={};
		let randNum=randomNum(0,5);
		//console.log("随机数",randNum);
		obj.title=dataList[randNum].title;
		obj.imgUrl=dataList[randNum].imgUrl;
		obj.tags=dataList[randNum].tags;
		obj.class=dataList[randNum].class;
		dataList.push(obj);
	}
	loopindex.value++;
}


</script>
<style>
	page{
		background:#F7F7F7;
	}
</style>
<style lang="scss" scoped>
	@import "index.scss";	
</style>
